<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>GeoExt QuickStart &mdash; GeoExt v1.1</title>
    <link rel="stylesheet" href="../_static/geoext.css" type="text/css" />
    <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
    <script type="text/javascript">
      var DOCUMENTATION_OPTIONS = {
        URL_ROOT:    '../',
        VERSION:     '1.1',
        COLLAPSE_MODINDEX: false,
        FILE_SUFFIX: '.html',
        HAS_SOURCE:  true
      };
    </script>
    <script type="text/javascript" src="../_static/jquery.js"></script>
    <script type="text/javascript" src="../_static/doctools.js"></script>
    <link rel="shortcut icon" href="../_static/favicon.ico"/>
    <link rel="top" title="GeoExt v1.1" href="../index.html" />
    <link rel="up" title="Tutorials" href="index.html" />
    <link rel="next" title="MapPanel Tutorial" href="mappanel-tutorial.html" />
    <link rel="prev" title="Tutorials" href="index.html" />
    
    
    
    
    

  </head>
  <body>
    <div class="header">
        <div class="wrap">
            <h1 id="logo"><a href="../index.html">GeoExt</a></h1>
            <ul id="top-nav">
                <li class="first"><a href="../docs.html">Documentation</a></li>
                <li><a href="../examples.html">Examples</a></li>
                <li><a href="../downloads.html">Download</a></li>
                <li><a href="http://trac.geoext.org/">Development</a></li>
            </ul>
            <div id="searchbox">
                <form class="search" action="../search.html" method="get">
                    <input id="searchbox-query" type="text" name="q" size="25" value="Search &hellip;" tabindex="3" onblur="if(this.value=='') this.value='Search &hellip;';" onfocus="if(this.value=='Search &hellip;') this.value='';" />
                    <input id="searchbox-submit" type="image" value="Search" src="../_static/img/search_icon_green.png" />
                    <input type="hidden" name="check_keywords" value="yes" />
                    <input type="hidden" name="area" value="default" />
                </form>
            </div>
        </div>
    </div>

    <div class="related">
      <h3>Navigation</h3>
      <ul>
        <li><a href="../index.html">GeoExt</a> &raquo;</li>
          <li><a href="index.html" accesskey="U">Tutorials</a> &raquo;</li>
        <li><a href="#">GeoExt QuickStart</a></li>
      </ul>
    </div>

      <div class="sphinxsidebar">
        <div class="sphinxsidebarwrapper">
            <h3><a href="../index.html">Table Of Contents</a></h3>
            <ul>
<li><a class="reference external" href="#">GeoExt QuickStart</a><ul>
<li><a class="reference external" href="#getting-geoext">Getting GeoExt</a></li>
<li><a class="reference external" href="#basic-example">Basic Example</a></li>
<li><a class="reference external" href="#going-further">Going Further</a></li>
</ul>
</li>
</ul>

            <h4>Previous topic</h4>
            <p class="topless"><a href="index.html"
                                  title="previous chapter">Tutorials</a></p>
            <h4>Next topic</h4>
            <p class="topless"><a href="mappanel-tutorial.html"
                                  title="next chapter"><tt class="docutils literal docutils literal docutils literal"><span class="pre">MapPanel</span></tt> Tutorial</a></p>
        </div>
      </div>


    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body">
            
  <div class="section" id="geoext-quickstart">
<h1>GeoExt QuickStart<a class="headerlink" href="#geoext-quickstart" title="Permalink to this headline">¶</a></h1>
<p>Welcome to GeoExt!  This document is intended to help you get started
with GeoExt.  With GeoExt, you can start from nothing and have a rich
mapping application in seconds.</p>
<div class="section" id="getting-geoext">
<h2>Getting GeoExt<a class="headerlink" href="#getting-geoext" title="Permalink to this headline">¶</a></h2>
<p>GeoExt is built on top of the robust OpenLayers JavaScript mapping
library and the rich graphical components of ExtJS.  For licensing
reasons, ExtJS cannot be included in the GeoExt download, so preparing
GeoExt for use on your own web pages is a multi-step process:</p>
<ol class="arabic simple">
<li>Download GeoExt from the <a class="reference external" href="../downloads.html"><em>downloads page</em></a>. For the purposes
of this quickstart, the development version will be fine.</li>
<li>Download OpenLayers 2.10 or later from <a class="reference external" href="http://openlayers.org/">http://openlayers.org/</a>.</li>
<li>Download the latest Ext 3.x from <a class="reference external" href="http://www.sencha.com/learn/Ext_Version_Archives">the ExtJS website</a>.</li>
<li>Place both unpacked libraries in a directory that is published by your web
server. For this tutorial, I will assume that this is the root of your web
server, so that GeoExt.js is at <a class="reference external" href="http://localhost/GeoExt/lib/GeoExt.js">http://localhost/GeoExt/lib/GeoExt.js</a> and
ext-all.js is at <a class="reference external" href="http://localhost/ext-3.3.1/ext-all.js">http://localhost/ext-3.3.1/ext-all.js</a>. I will also assume
that your web page is stored at the root of the web server, e.g.
<a class="reference external" href="http://localhost/quickstart.html">http://localhost/quickstart.html</a>.</li>
<li>Now you&#8217;re ready to use GeoExt in your application!</li>
</ol>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">For production environments, the GeoExt team recommends that
you use compressed and minified builds of GeoExt and ExtJS to
optimize the download size of your page.  A generic minified build
containing all of GeoExt is available from the
<a class="reference external" href="../downloads.html"><em>downloads page</em></a>, but advanced users can build their
own.</p>
</div>
</div>
<div class="section" id="basic-example">
<h2>Basic Example<a class="headerlink" href="#basic-example" title="Permalink to this headline">¶</a></h2>
<p>Let&#8217;s build a simple web page that just embeds a map with interactive
navigation.</p>
<ol class="arabic">
<li><p class="first">Include the ExtJS libraries in your web page.</p>
<div class="highlight-html"><div class="highlight"><pre><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;ext-3.3.1/adapter/ext/ext-base.js&quot;</span> <span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;ext-3.3.1/ext-all.js&quot;</span>  <span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href=</span><span class="s">&quot;ext-3.3.1/resources/css/ext-all.css&quot;</span><span class="nt">&gt;&lt;/link&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;OpenLayers/OpenLayers.js&quot;</span> <span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;GeoExt/lib/GeoExt.js&quot;</span> <span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href=</span><span class="s">&quot;GeoExt/resources/css/geoext-all-debug.css&quot;</span><span class="nt">&gt;&lt;/link&gt;</span>
</pre></div>
</div>
</li>
<li><p class="first">Create a <tt class="docutils literal"><span class="pre">&lt;div&gt;</span></tt> element in your web page with its <tt class="docutils literal"><span class="pre">id</span></tt>
attribute set to <tt class="docutils literal"><span class="pre">gxmap</span></tt>.  We will use the <tt class="docutils literal"><span class="pre">id</span></tt> to attach a
GeoExt component to the <tt class="docutils literal"><span class="pre">div</span></tt>.</p>
</li>
<li><p class="first">Attach a <tt class="docutils literal"><span class="pre">MapPanel</span></tt> object to the <tt class="docutils literal"><span class="pre">div</span></tt> with some JavaScript code:</p>
<div class="highlight-html"><div class="highlight"><pre><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span>
    <span class="nx">Ext</span><span class="p">.</span><span class="nx">onReady</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">map</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Map</span><span class="p">();</span>
        <span class="kd">var</span> <span class="nx">layer</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Layer</span><span class="p">.</span><span class="nx">WMS</span><span class="p">(</span>
            <span class="s2">&quot;Global Imagery&quot;</span><span class="p">,</span>
            <span class="s2">&quot;http://maps.opengeo.org/geowebcache/service/wms&quot;</span><span class="p">,</span>
            <span class="p">{</span><span class="nx">layers</span><span class="o">:</span> <span class="s2">&quot;bluemarble&quot;</span><span class="p">}</span>
        <span class="p">);</span>
        <span class="nx">map</span><span class="p">.</span><span class="nx">addLayer</span><span class="p">(</span><span class="nx">layer</span><span class="p">);</span>

        <span class="k">new</span> <span class="nx">GeoExt</span><span class="p">.</span><span class="nx">MapPanel</span><span class="p">({</span>
            <span class="nx">renderTo</span><span class="o">:</span> <span class="s1">&#39;gxmap&#39;</span><span class="p">,</span>
            <span class="nx">height</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span>
            <span class="nx">width</span><span class="o">:</span> <span class="mi">600</span><span class="p">,</span>
            <span class="nx">map</span><span class="o">:</span> <span class="nx">map</span><span class="p">,</span>
            <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;A Simple GeoExt Map&#39;</span>
        <span class="p">});</span>
    <span class="p">});</span>
<span class="nt">&lt;/script&gt;</span>
</pre></div>
</div>
</li>
</ol>
<p>The entire source of your page should look something like:</p>
<div class="highlight-html"><div class="highlight"><pre><span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&gt;</span>

<span class="nt">&lt;title&gt;</span> A Basic GeoExt Page <span class="nt">&lt;/title&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;ext-3.3.1/adapter/ext/ext-base.js&quot;</span> <span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;ext-3.3.1/ext-all.js&quot;</span>  <span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href=</span><span class="s">&quot;ext-3.3.1/resources/css/ext-all.css&quot;</span><span class="nt">&gt;&lt;/link&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;OpenLayers/OpenLayers.js&quot;</span> <span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;GeoExt/lib/GeoExt.js&quot;</span> <span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href=</span><span class="s">&quot;GeoExt/resources/geoext-all-debug.css&quot;</span><span class="nt">&gt;&lt;/link&gt;</span>

<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span>
    <span class="nx">Ext</span><span class="p">.</span><span class="nx">onReady</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">map</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Map</span><span class="p">();</span>
        <span class="kd">var</span> <span class="nx">layer</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Layer</span><span class="p">.</span><span class="nx">WMS</span><span class="p">(</span>
            <span class="s2">&quot;Global Imagery&quot;</span><span class="p">,</span>
            <span class="s2">&quot;http://maps.opengeo.org/geowebcache/service/wms&quot;</span><span class="p">,</span>
            <span class="p">{</span><span class="nx">layers</span><span class="o">:</span> <span class="s2">&quot;bluemarble&quot;</span><span class="p">}</span>
        <span class="p">);</span>
        <span class="nx">map</span><span class="p">.</span><span class="nx">addLayer</span><span class="p">(</span><span class="nx">layer</span><span class="p">);</span>

        <span class="k">new</span> <span class="nx">GeoExt</span><span class="p">.</span><span class="nx">MapPanel</span><span class="p">({</span>
            <span class="nx">renderTo</span><span class="o">:</span> <span class="s1">&#39;gxmap&#39;</span><span class="p">,</span>
            <span class="nx">height</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span>
            <span class="nx">width</span><span class="o">:</span> <span class="mi">600</span><span class="p">,</span>
            <span class="nx">map</span><span class="o">:</span> <span class="nx">map</span><span class="p">,</span>
            <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;A Simple GeoExt Map&#39;</span>
        <span class="p">});</span>
    <span class="p">});</span>
<span class="nt">&lt;/script&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;gxmap&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</pre></div>
</div>
<p>And that&#8217;s it! You now have all of GeoExt, ready to bring your geospatial data
to life. Go forth and prosper!</p>
</div>
<div class="section" id="going-further">
<h2>Going Further<a class="headerlink" href="#going-further" title="Permalink to this headline">¶</a></h2>
<p>From here, there are a wide variety of options available for making
customized, highly interactive mapping applications with GeoExt.  To
learn more take a look at <a class="reference external" href="index.html"><em>Tutorials</em></a>, <a class="reference external" href="../examples.html#examples"><em>examples</em></a> and
<a class="reference external" href="../lib/index.html"><em>API Reference</em></a>.</p>
<p>We also recommend reading <a class="reference external" href="../primers/ext-primer.html"><em>Primer: Ext</em></a> and
<a class="reference external" href="../primers/openlayers-primer.html"><em>Primer: OpenLayers</em></a> to become acquainted with the libraries that
form the foundation of GeoExt.</p>
</div>
</div>


          </div>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
    <div class="related">
      <h3>Navigation</h3>
      <ul>
            <li class="right" style="margin-right: 10px">
              <a href="../genindex.html" title="General Index"
                 accesskey="I">index</a></li>
            <li class="right" >
              <a href="../modindex.html" title="Global Module Index"
                 accesskey="M">modules</a> |</li>
            <li class="right" >
              <a href="mappanel-tutorial.html" title="MapPanel Tutorial"
                 accesskey="N">next</a> |</li>
            <li class="right" >
              <a href="index.html" title="Tutorials"
                 accesskey="P">previous</a> |</li>
        <li><a href="../index.html">GeoExt</a> &raquo;</li>
          <li><a href="index.html" >Tutorials</a> &raquo;</li>
        <li><a href="#">GeoExt QuickStart</a></li>
      </ul>
    </div>

    <div class="footer">
      &copy; Copyright 2009-2010, GeoExt Community.
    </div>
  </body>
</html>